<template>
<div>
  <Modal v-model="polygonMapModal" title="多边形选取" fullscreen  @on-ok="polygonMapModalConfirm">
    <Card class="cardStrleClass">
      <template>
        <Input v-model="inputSearch" placeholder="请输入小区名称" style="width: 200px;margin-right: 20px"/>
      </template>
        <Button type="primary"  @click="autoInput">搜索</Button>
      <div style="max-height: 300px;max-width: 320px;overflow-x: auto;overflow-y: auto">
       <span style="font-size: 10px">注：根据输入小区名称获取小区详细地址</span>
        <RadioGroup v-if="dataList.length > 0" v-model="addressResult">
          <Divider />
          <Radio v-for="(item,index) in dataList" :key="index" :label="item.name + item.address">
            <span>{{item.district}} _ {{item.name}}  _ {{item.address}}</span>
          </Radio>
        </RadioGroup>
      </div>
    </Card>
    <div id="polygonMap"></div>
  </Modal>
</div>
</template>

<script>
// import { getZoom } from '../../../libs/util'

import { findCommunityXJList, findResidentialList } from '../../../api/eventlist'
import { autoCenter, autoPolygon } from '../../../libs/util'

export default {
  name: 'new-map-polygon',
  data () {
    return {
      polygonMapModal: false,
      map: null,
      lng: '',
      lat: '',
      polygons: [],
      updatePolygins: [],
      zoom: 9,
      Polygon: null,
      dataList: [],
      inputSearch: '',
      addressResult: '',
      resultPolyons: [],
      returnObject: {},
      operationType: ''
    }
  },
  methods: {
    // 新建
    insertInit (e) {
      let x = e.csc_mapjson.split(',')
      e.lng = x[0]
      e.lat = x[1]
      this.polygonMapModal = true
      let _this = this
      setTimeout(function () {
        _this.initMap(e, 'insert')
      }, 1000)
    },
    // 加载地图
    initMap (e1, e2) {
      this.map = new AMap.Map('polygonMap', {
        resizeEnable: true,
        center: new AMap.LngLat(e1.lng, e1.lat),
        zoom: 15
      })
      if (e2 === 'insert') {
        this.operationType = 'insert'
        // 根据点位生产多边形坐标
        this.polygons = autoPolygon(e1)
        // 地图创建加载多边形
        this.createPolygon()
        // 查询社区小区
        this.findCommunityResidential()
      }
      if (e2 === 'update') {
        this.operationType = 'update'
        // 地图修改加载多边形
        this.updatePolygon()
      }

      // 生成点位
      this.createMaker(e1)
      this.findCommunityXJList()
    },
    // 搜索框
    autoInput () {
      let _this = this
      var keywords = _this.inputSearch
      var autoOptions = {
        city: '沈阳'
      }
      var autoComplete = new AMap.Autocomplete(autoOptions)
      autoComplete.search(keywords, function (status, result) {
        console.log(result)
        _this.dataList = result.tips
      })
      // })
    },
    // 中心点
    createMaker (e) {
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(e.lng, e.lat)
      })
      this.map.add(this.marker)
    },
    // 新建多边形
    createPolygon () {
      var path = []
      let data = this.polygons
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#1E9FFF',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#FFB800'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#1E9FFF'
        })
      })
      this.Polygon = Polygon
      var polyEditor = new AMap.PolyEditor(this.map, this.Polygon)
      polyEditor.open()
      this.map.setFitView([ Polygon ])
      this.map.setZoom(this.map.getZoom() - 1)
      this.map.add(Polygon)
    },
    // 查询社区小区
    findCommunityResidential () {
      findResidentialList().then(ret => {
        if (ret.data.errcode === 0) {
          let data = ret.data.data
          data.forEach(item => {
            if (item.csc_mapjson) {
              try {
                this.findCommunityPolygon(JSON.parse(item.csc_mapjson))
              } catch (e) {
                console.log(e)
              }
            }
          })
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    // 地图加载小区
    findCommunityPolygon (e) {
      var path = []
      let data = e
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#FF1493',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#FF1493',
        zIndex: 50
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#7FFF00'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#FF1493'
        })
      })
      this.map.add(Polygon)
    },
    // 地图加载网格
    findCommunityGardenPolygon (e) {
      var path = []
      let data = e
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#E066FF',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#E066FF',
        zIndex: 50
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#EEDC82'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#E066FF'
        })
      })
      this.map.add(Polygon)
    },
    findCommunityXJList () {
      let data = {
        id: this.$store.state.user.severUserInfo.company_id
      }
      findCommunityXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let data = ret.data.data
          data.forEach(item => {
            if (item.csc_mapjson) {
              try {
                this.findCommunityGardenPolygon(JSON.parse(item.csc_mapjson))
              } catch (e) {
                console.log(e)
              }
            }
          })
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    // Modal确认
    polygonMapModalConfirm () {
      this.polygons = this.Polygon.getPath()
      let newpath = []
      this.polygons.forEach(item => {
        let lng = item.lng
        let lat = item.lat
        let point = [lng, lat]
        newpath.push(point)
      })
      this.resultPolyons = JSON.stringify(newpath)
      if (this.operationType === 'insert') {
        this.returnObject.name = this.inputSearch
        this.returnObject.address = this.addressResult
        this.returnObject.csc_mapjson = this.resultPolyons
        this.returnObject.measure = this.Polygon.getArea()
      }
      if (this.operationType === 'update') {
        this.returnObject.measure = this.Polygon.getArea()
        this.returnObject.csc_mapjson = this.resultPolyons
      }
      this.$emit('returnMapInfo', this.returnObject)
    },
    // 修改
    updateInit (e) {
      this.updatePolygins = e.csc_mapjson
      let x = autoCenter(this.updatePolygins)
      this.polygonMapModal = true
      let _this = this
      setTimeout(function () {
        _this.initMap(x, 'update')
      }, 1000)
    },
    // 修改多边形
    updatePolygon () {
      var path = []
      let data = JSON.parse(this.updatePolygins)
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#1E9FFF',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#FFB800'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#1E9FFF'
        })
      })
      this.Polygon = Polygon
      var polyEditor = new AMap.PolyEditor(this.map, this.Polygon)
      polyEditor.open()
      this.map.setFitView([ Polygon ])
      this.map.setZoom(this.map.getZoom() - 1)
      this.map.add(Polygon)
    }
  },
  beforeDestroy () {
    this.map && this.map.destroy()
  },
  watch: {
    polygonMapModal (val) {
      if (!val) {
        this.map && this.map.destroy()
      }
    }
  }
}
</script>

<style scoped>
#polygonMap {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.cardStrleClass{
  width:320px;position: absolute;z-index: 99;top: 25px;left: 25px
}
</style>
